<template>
  <!-- 居中弹窗组件（异步，带自定义插槽） -->
  <view
    class="popup-middle-anync-wrapper"
    @click="hide"
    v-if="popupShow"
  >
    <view class="popup-box" @click.stop>
      <!-- title -->
      <view class="popup-title">
        <view class="line"></view>
        <view class="title">{{ title }}</view>
        <view class="btn-close" @click="hide">
          <image class="img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/popup-close.png"></image>
        </view>
      </view>

      <!-- 自定义插槽 -->
      <slot></slot>

      <!-- 按钮 -->
      <view class="operation-btn-wrapper">
        <view class="operation-btn assist-btn" @click="assistOperate()" v-if="!singleBtn">
          {{ assistBtnText }}
        </view>
        <view class="operation-btn" @click="operate">
          {{ mainBtnText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';

/** props-组件属性 */
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 副按钮默认文本
  assistBtn: {
    type: String,
    default: '取消',
  },
  // 主按钮默认文本
  mainBtn: {
    type: String,
    default: '确认',
  },
  // 是否单按钮（仅留主按钮）
  singleBtn: {
    type: Boolean,
    default: false,
  },
});

/** emit-组件事件 */
const emits = defineEmits(['operate', 'assistOperate']);

/** data-数据 */
// 弹窗显示
let popupShow = ref(false);
// 副按钮文本
let assistBtnText = ref(props.assistBtn);
// 主按钮文本
let mainBtnText = ref(props.mainBtn);
// 参数（用于异步传递调用）
let paramsData = ref(null);

/** 显示弹窗 */
function show(params = null) {
  popupShow.value = true;
  if (params) paramsData.value = params;
}

/** 关闭弹窗 */
function hide() {
  popupShow.value = false;
}

/** 主按钮操作 */
function operate() {
  emits('operate', paramsData.value);
}

/** 副按钮操作**/
function assistOperate() {
  hide();
  emits('assistOperate', paramsData.value);
}

/** 暴露方法给外部使用 */
defineExpose({
  show,
  hide
});

</script>

<style lang='scss' scoped>
.popup-middle-anync-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-bgColor);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;

  .popup-box {
    position: relative;
    width: 665rpx;
    background: #ffffff;
    border-radius: 20px;
    animation: fade-in 0.3s ease-in-out;

    .popup-title {
      position: relative;
      padding: 30rpx 12rpx 40rpx;
      height: 30rpx;
      display: flex;
      align-items: center;

      .line {
        width: 6rpx;
        height: 20rpx;
        background: var(--primary-color);
        border-radius: 3rpx;
        margin-right: 14rpx;
      }

      .title {
        font-size: 30rpx;
        font-weight: 400;
        color: var(--text-color);
      }

      .btn-close {
        position: absolute;
        top: 30rpx;
        right: 20rpx;
        z-index: 9;
        width: 30rpx;
        height: 30rpx;
        font-size: 28rpx;
        color: #999999;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          width: 16rpx;
          height: 16rpx;
          display: block;
        }
      }
    }

    .operation-btn-wrapper {
      padding: 30rpx 0;
      margin: 0 auto;
      width: 605rpx;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .operation-btn {
      flex: 1;
      height: 100rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #FFFFFF;
      background: var(--primary-color);
      border: 1rpx solid var(--primary-color);
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .assist-btn {
      margin-right: 20rpx;
      color: var(--primary-color);
      background: #ffffff;
      border: 1rpx solid var(--primary-color);
    }
  }
}

@keyframes fade-in {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>